<template>
  <c-loading :loading="false">
    <view class="container order">
      <view class="header-pad">
        <view class="fixed-header">
          <c-tabs v-model="state.status" @change="onChange">
            <c-tab v-for="(item, i) in orderStatusMap" :value="item.value" :key="i">{{ item.name }}</c-tab>
          </c-tabs>
        </view>
      </view>
      <template v-for="order in list" :key="order.orderNo">
        <view class="order-wrap">
          <view class="order-title">
            <view class="order-no" @tap.stop="copy(order.orderNo)">
              单号：
              <text class="color-primary">{{ order.orderNo }}</text>
            </view>
            <view class="order-status" :class="orderStatusColor(order)" @tap="toInfo(order)">{{ order.orderStatusName }}</view>
          </view>
          <order-item v-for="item in order.items" :key="item.id" v-bind="item" @tap="toInfo(order)" />
          <view class="order-foot" @tap="toInfo(order)">
            <!-- <template v-if="order.discountAmount">
              <view>优惠</view>
              <c-number class="price-discount" prefix="￥" :value="order.discountAmount" />
            </template> -->
            <view>实付</view>
            <c-number precision-mini class="price" :precision="2" prefix="￥" :value="order.paymentAmount" />
            <view class="grow"></view>
            <c-button size="mini" v-if="order.orderStatus == 0" type="danger" @tap.stop="toPay(order)">立即支付</c-button>
            <c-button size="mini" v-if="order.deliveryTime && order.orderStatus <= 20" type="primary" plain @tap.stop="lookDelivery(order)">查看物流</c-button>
            <c-button size="mini" v-if="order.orderStatus == 20" type="primary" @tap.stop="signFor(order)">确认收货</c-button>
            <c-button size="mini" v-if="order.orderStatus == 80 && !order.evaluateTime" type="primary" @tap.stop="toEvaluate(order)">去评价</c-button>
          </view>
        </view>
      </template>
      <c-pager v-bind="pager"></c-pager>
    </view>
    <template #popup>
      <pay-complete v-model="showComplete" :success="paySuccess" @look="router.replace('/pagesOrder/order/info?id=' + state.orderNo)"></pay-complete>
    </template>
  </c-loading>
</template>
<script setup>
import { CButton, CLoading, CTab, CTabs, CNumber, CPager } from '@/components';
import OrderItem from './components/order-item.vue';
import PayComplete from './components/pay-complete.vue';
import { useLoading, usePager, useRouter } from '@/hooks';
import api from '@/api';
import { reactive, ref } from 'vue';
import { View } from '@tarojs/components';
import { setClipboardData, requestPayment } from '@tarojs/taro';
import toast from '@/utils/toast';
import { APPID } from '@/utils/config';

const router = useRouter();
const state = reactive({
  status: 0
});

const showComplete = ref(false);

const paySuccess = ref(true);

const { reload, list, pager } = usePager({
  immediate: false,
  handler: (skip, take) => api.order.userList({ skip, take, ...state })
});

useLoading(options => {
  if (options.status != null) {
    state.status = parseInt(options.status);
  }
  reload();
});

const copy = e => {
  setClipboardData({
    data: e,
    success() {
      toast.success('订单号已复制');
    }
  });
};

const orderStatusMap = [
  { value: 0, name: '全部' },
  { value: 1, name: '待支付' },
  { value: 2, name: '待发货' },
  { value: 3, name: '待收货' },
  { value: 4, name: '待评价' }
];
const orderStatusColor = order => {
  switch (order.orderStatus) {
    case 0:
    case 20:
      return 'color-warn';
    case 100:
    case 101:
    case 102:
      return 'color-gray';
    default:
      return 'color-primary';
  }
};

const toInfo = order => {
  router.push('/pagesOrder/order/info?id=' + order.orderNo).then(data => {
    reload();
  });
};

const onChange = e => {
  reload();
};

const toPay = async order => {
  const packageV = await api.order.doPay({
    orderNo: order.orderNo,
    payChannel: 'WechatMini',
    partyAppId: APPID.value
  });

  requestPayment({
    ...packageV,
    success() {
      api.order.queryPay({ orderNo: order.orderNo }).then(r => {
        if (r) {
          reload();
        }
      });
    },
    fail(e) {
      // showComplete.value = true;
      // paySuccess.value = false;
    }
  });
};

const lookDelivery = order => {};
const signFor = order => {
  toast.confirm('确认已收到货').then(data => {
    return api.order
      .signFor({ id: order.orderNo })
      .then(() => {
        reload();
      })
      .toast('签收成功');
  });
};

const toEvaluate = order => {
  router.push('/pagesBus/evaluate/publish?id=' + order.orderNo).then(() => {
    reload();
  });
};
</script>
<style lang="scss">
.container.order {
  .header-pad {
    height: 80px;
    .fixed-header {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 80px;
      z-index: 2;
    }
  }

  .order-wrap {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    background-color: var(--color-caption);
    border-radius: 10px;
    padding-top: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    .order-title {
      display: flex;
      justify-content: space-between;
      font-size: 24px;
      padding: 0 30px;
      .order-status.color-warn {
        font-weight: bold;
      }
    }
    .order-foot {
      display: flex;
      justify-content: space-between;
      font-size: 26px;
      padding: 0 30px;
      height: 80px;
      align-items: center;
      .price {
        color: var(--color-danger);
        font-size: 36px;
      }
      .price-discount {
        color: var(--color-danger);
        margin-right: 18px;
        .c-number-suffix {
          font-size: 1em;
        }
      }
    }
  }
}
</style>
